<template>
  <div class="center">
    <input
      type="text"
      placeholder="请输入任务内容"
      v-model="todo"
      @keydown.enter="add"
    />
    <button @click="add">添加任务</button>
    <div class="undone">
      <h1>
        未完成任务
      </h1>
      <button class="alldel" @click="dels"  style="background-color: #d13710;">全部删除</button>  
      <button class="alladd" @click="adds" style="background-color: rgb(99, 132, 240);">全部完成</button>
      <div
        class="box"
        v-for="(item, index) in list2"
        :key="index"
        :class="{ hidden: item.isdone }"
      >
        <input type="radio" :checked="item.isdone" @click="done(index)" />
        <div class="items" @click="gb(index)">{{ item.value }}</div>
        <button class="btn" @click="del(index)">删除</button>
      </div>
    </div>
    <div class="done">
      <h1>
        已完成任务
      </h1>
      <button class="alldel" @click="delss">全部删除已完成</button>
      <button class="alladd" @click="addss">全部取消已完成</button>
      <div
        class="box"
        v-for="(item, index) in list2"
        :key="index"
        :class="{ hidden: !item.isdone }"
      >
        <input type="radio" :checked="item.isdone" @click="done(index)" />
        <div class="items" @click="gb(index)">{{ item.value }}</div>
        <button class="btn" @click="del(index)">删除</button>
      </div>
    </div>
    <!-- <div v-show="ok">
    <input
      type="text"
      placeholder="请输修改内容"
      v-model="text"
    /><button @click="xg">修改</button></div>-->
  </div> 
</template>

<script>
import axios from 'axios'
export default {
  name: "TodoList",
  data() {
    return {
      todo: "",
      list2:[],
      ok:false,
      text:"",
      num:0
    };
  },
  created() {
    // let list = localStorage.getItem("list");
    // if (list) {
    //   this.list = JSON.parse(list);
    // }
    // console.log(this.list);
    this.chaxuns()
    // this.checkLen();
  },
  methods: {
    async chaxuns() {
    await fetch('http://114.132.246.213:8000/chazhao').then(res=>res.json()).then(res=>this.list2=res)
//      await axios('http://localhost:8055/chaxun')
//       .then(response => { 
//   this.list2=response.data
//        console.log(response.data)

//       })
    },
    async add() {
    let obj = {
    value: this.todo,
    isdone: 0,
    };
if(obj.value==''){
        alert("添加列表不能为空")
      }else{
           await fetch('http://114.132.246.213:8000/tianjia',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)
        }
       )
     .then(function(response) {
  
});
      }
      this.todo = "";
      this.chaxuns()
    },
   async del(index){
       let obj = {
         value: this.list2[index].value
      };
      await fetch('http://114.132.246.213:8000/shanchu',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  // console.log(response)
});
     
    this.chaxuns()
    },
    async done(index) {
       let obj = {
        value: this.list2[index].value,
        isdone: !this.list2[index].isdone,
      };
      await fetch('http://114.132.246.213:8000/doneupdate',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  
});
this.chaxuns()
    },
    async dels(){
       let obj = {
        alldone:0
      };
      await fetch('http://114.132.246.213:8000/dels',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  // console.log(response)
});
     
    this.chaxuns()
    },
    async adds(){
       let obj = {
        olddone:0,
        isdone: 1,
      };
      await fetch('http://114.132.246.213:8000/alldone',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  // console.log(response)
});
   
    this.chaxuns()
    },
  async addss(){
       let obj = {
        olddone:1,
        isdone: 0,
      };
      await fetch('http://114.132.246.213:8000/noalldone',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  // console.log(response)
});
    
    this.chaxuns()
    },
    async delss(){
       let obj = {
        alldones:1
      };
      await fetch('http://114.132.246.213:8000/delss',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
     .then(function(response) {
  // console.log(response)
});
     
    this.chaxuns()
    },
  async gb(index){
    this.text=''
    this.ok=!this.ok
    this.num=index
  },
  async xg(){
       let obj = {
        oldvalue:this.list2[this.num].value,
        newvalue:this.text
      };
    await fetch('http://114.132.246.213:8000/change',{
            method: "POST",
            headers:{
                "Content-Type":"application/json"
            },
       //    json格式转换
            body:JSON.stringify(obj)  
        }
       )
      .then(function(response) {

      });
    this.chaxuns()
    this.ok=!this.ok
  }
  },
};
</script>
<style scoped>
.box {
  margin-top: 30px;
  width: 500px;
  margin: 50px auto;
  /* border: 2px solid; */
  display: flex;
  justify-content: space-between;
}
.btn {
  border: 1px solid;
  color: #fff;
  background-color: #d13710;
}
.hidden {
  display: none !important;
}
.items {
  flex: 1;
  margin: 0 50px;
  text-align: left;
}
h1 {
  position: relative;
}
.num {
  display: inline-block;
  position: absolute;
  right: 30%;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: rgb(218, 31, 31);
  font-size: 24px;
  line-height: 30px;
}
.alldel{
  position: relative;
  left: 250px;
  border-radius: 5%;
}
.alladd{
  position: relative;
  left: -250px;
  border-radius: 5%;
}
</style> 